

html,
body {
    overflow-x: hidden;
}

/* header nav */
@keyframes nav-hide {
    from {
        width: 40px;
        background-position: center top, center 25%, center;
    }

    to {
        width: auto;
        background:
            linear-gradient(to right, transparent, transparent),
            linear-gradient(to right, transparent, transparent),
            linear-gradient(to right, transparent, transparent);
        background-position: center 30%, center 70%, center 100%;
    }
}


@keyframes nav-open {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

@keyframes nav-close {
    0% {
        /* position: absolute;
        width: 100vw;
        height: 100vh;
        width: 100dvw;
        height: 100dvh; */
        width: 2.5rem;
        height: 2rem;
        transform: scale(4, 3);
    }

    100% {
        width: 2.5rem;
        height: 2rem;
        transform: scale(1);
    }
}


@keyframes nav-item-show {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}


@keyframes nav-item-hide {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0);
    }
}


body > header nav.open,
.page-header nav.open,
.nav.open {
    cursor: default;
    z-index: 9999;
    background: none;
    background-color: var(--color-theme-translucent);
    position: fixed;
    right: 0%;
    top: 0%;
    /* 确保兼容性 */
    width: 100vw;
    height: 100vh;
    width: 100dvw;
    height: 100dvh;
    transform-origin: right top;
    transition: all 0.1s, background-color 0.5s;
    animation: nav-open 0.5s;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


body > header nav.open:hover,
.page-header nav.open:hover,
.nav.open:hover {
    cursor: default;
    background: none;
    background-color: var(--color-theme-translucent);
}


body > header nav.open *,
.page-header nav.open *,
.nav.open *,
.nav.open .nav-item {
    display: flex;
    flex-direction: column;
    visibility: visible;
    transition: visibility 0s;
}


body > header nav.close,
.page-header nav.close,
.nav.close {
    animation: nav-close 0.8s;
}
body > header nav.close > *,
.page-header nav.close > *,
.nav.close > * {
    height: inherit;
    display: flex;
    flex-direction: column;
}


/*
body > header nav.close *,
body > header nav.close .nav-item,
.page-header nav.close *,
.page-header nav.close .nav-item
.nav.close *,
.nav.close .nav-item {
    display: none;
}
*/


body > header nav,
.page-header nav,
.nav {
    z-index: 99;
    align-self: flex-start;
    justify-self: center;

    transform-origin: center bottom;
    transition: all 1s;

    width: 2.5rem;
    height: 2rem;
    background:
        linear-gradient(to right, var(--color-primary), var(--color-primary)),
        linear-gradient(to right, var(--color-primary), var(--color-primary)),
        linear-gradient(to right, var(--color-primary), var(--color-primary));
    background-repeat: repeat-x;
    background-size:
        1px 1px,
        1px 1px,
        1px 1px;
    background-position:
        center top,
        center,
        center bottom;
}


body > header nav:hover,
.page-header nav:hover,
.nav:hover {
    transition: all 0.2s;
    cursor: pointer;
    background-image:
        linear-gradient(to right, var(--color-text-lighting), var(--color-text-lighting)),
        linear-gradient(to right, var(--color-text-lighting), var(--color-text-lighting)),
        linear-gradient(to right, var(--color-text-lighting), var(--color-text-lighting));
}

body > header nav a,
.page-header nav a,
.nav a {
    font-size: var(--font-size-medium);
}

body > header nav *,
.page-header nav *,
.nav *,
.nav .nav-item {
    transform-origin: center top;
    visibility: hidden;
    transition: visibility 0s;
    /* animation: nav-item-hide 1s; */
}


/* fit */
/* nav hide */
@media (min-width: 40rem) {

    body > header nav.close,
    .page-header nav.close,
    .nav.close {
        margin-top: 0;
        /* background: none; */
        visibility: hidden;
        width: auto;
        height: 100%;
        transform-origin: center top;
        transition: width 0s, visibility 1s;
        animation: nav-hide 1s;
    }


    body > header nav.close *,
    body > header nav.close .nav-item,
    .page-header nav.close *,
    .page-header nav.close .nav-item,
    .nav.close *,
    .nav.close .nav-item {
        visibility: visible;
    }

    body > header nav.close > ul,
    body > header nav.close > .nav-item,
    .page-header nav.close > ul,
    .page-header nav.close > .nav-item,
    .nav.close > ul,
    .nav.close > .nav-item {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }


    body > header nav,
    .page-header nav,
    .nav {
        margin-top: 0;
        /* background: none; */
        visibility: hidden;
        width: 12%;
        height: 100%;
        transform-origin: center top;
        transition: width 0s, visibility 1s;
        animation: nav-hide 1s;
    }


    body > header nav:hover,
    .page-header nav:hover,
    .nav:hover {
        cursor: default;
        background: none;
    }

    body > header nav *,
    .page-header nav *,
    .nav *,
    .nav .nav-item {
        visibility: visible;
        transition: visibility 1s;
        transform: translateY(0%);
        animation: nav-item-show 1s;
    }

}


